Repository navigation
feat(ui): dashboard-pattern blocks (#228) - #233
Merged
Merged
Conversation
- ListToolbar moves from Studio into @cloudhal/ui with fixed slots in a fixed order: the search (filling the free width), filters, other actions, sort, and refresh last (Kumo RefreshButton). All 17 Studio call sites import it from @cloudhal/ui. - StatusIndicator: a dot or thin bar plus the state's word for dense rows (deployments, steps, runs); the word carries the state, the pulse stops under reduced motion. - UsageMeterRow: a usage-rail row with the label, an info toggletip, used / limit, and a Kumo Meter that warns at 80 % and is danger at the limit, with the state's word as a badge. The meter keeps its label for screen readers and reads the value text and the state. - PageLayout docsHref + docsLabel: the "View docs" pill after the title. - PageLayout resource mode (ResourceHeader): crumbs plus an optional environment switcher in the top bar, underline Tabs under it with the actions on the right (primary last), and a visually hidden h1 instead of the large title. A new `resource` template is in the design lint and in DESIGN.md (§2aj). - ToggletipBadge's open-on-press logic becomes the shared useToggletip. - Tests cover the toolbar order, the meter's name, value and state, the docs pill, and the resource mode's focus order and arrow, Home, End and Enter keys. Closes #228 Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Madraka <[email protected]>
- UsageMeterRow:
- the info text is inside its button for screen readers (the button's
name is label + text; the portaled tooltip describes nothing);
- a fractional limit is the real maximum (0.5 of 0.5 fills the bar);
- warningLabel and dangerLabel are required, so a state is never shown
by colour alone.
- ResourceHeader:
- tabLabels is dropped (underline Tabs render no scroll buttons; a wide
bar scrolls sideways, arrow keys bring the focused tab into view);
- one rule under the tabs: the row's hairline, with Kumo's list border
off, so the active indicator sits on it.
- DESIGN.md §2aj says both.
- Tests:
- keyboard activation is asserted on its own (Space; happy-dom does not
turn Enter into a click on a native button), with the click as a
separate test;
- the info button's name, the fractional limit and the single rule
each have a test.
Refs #228
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Signed-off-by: Madraka <[email protected]>
… (PR #233) The header row wrapped (flex-wrap), so at 390 px the actions fell onto a second line with the only rule under them, and the tabs and their indicator floated above with none. The row now never wraps: - Wide (page container >= 48 rem): one line over one hairline. The tab list is the min-w-0 part that shrinks and scrolls, and the actions keep their size. - Narrow: the tab line carries the rule across the full width, and the actions follow on their own line below. Focus and visual order agree. Kumo's list border stays off, so the indicator always sits on the one rule. The test checks both layouts' classes, and DESIGN.md §2aj describes them. Checked visually at 1440 and 390 px with a throwaway harness (resource mode on the site overview, 5 tabs and 2 actions; not committed). Refs #228 Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Madraka <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds the five dashboard-pattern pieces that #228 asks for to
@cloudhal/ui. Every word is a prop. There is no demo route; tests and DESIGN.md entries cover the new blocks instead.ListToolbar(moved fromapps/studio/src/components)filters, otheractions,sort, thenrefreshlast (KumoRefreshButton, with its label as a prop). All 17 Studio list screens now import it from@cloudhal/ui.actionsis kept, so their markup is unchanged.StatusIndicatoractivepulses it, but not under reduced motion.UsageMeterRow(+usageState,USAGE_WARN_AT)used / limit(formatted by the screen), and a KumoMeter. The meter turns warning at 80 % (warnAt) and danger at the limit, with the state's word as a badge. Kumo'sMeter.labelis a plain string, so the visible row is the block's own. The meter keeps its label for screen readers (role="meter", named), andaria-valuetextis the value text plus the state. A test fails if Kumo's label row stops being the meter's first child.PageLayout docsHref+docsLabelLinkButton size="xs", a 14 px book icon, same tab). It is added to the ownedPageHeadercopy, marked "Cloudhal".PageLayout resource(ResourceHeader)switchersit in the top bar. Kumo underlineTabssit under it, withactionson the right and the one primary action last. There is no large title:titlebecomes a visually hiddenh1. Kumo's tab scroll-button labels are props (tabLabels).Also:
useToggletip.ToggletipBadge's open-on-press logic is now a shared hook, used byToggletipBadgeand byUsageMeterRow's info button.resourcetemplate row, and a new §2aj on resource pages,StatusIndicatorandUsageMeterRow;resourcetemplate (PageLayout,crumbs=,title=,resource=,SectionCard).@cloudhal/cli, because Studio ships inside it and every list's search now fills its row.@cloudhal/uiand Studio themselves are private.Keyboard and focus order (resource mode)
The order follows the DOM, and
test/dashboard-blocks.test.tsxchecks it:Inside the tab bar, ArrowRight moves focus without opening anything (Kumo's default manual activation), and Enter or a click opens the tab. Home and End jump to the first and last tab. The bar keeps one tab stop, which follows the selected tab.
Checks (run locally, one at a time; load stayed under ~4)
packages/ui:vitest runpassed 257 across 21 files, including the new file's 11. Typecheck is clean.apps/studio: typecheck is clean.design-rules.test.tspassed 609. The full suite passed 1407 across 85 files, run with--no-file-parallelism.pnpm design:lint: all 437 files clean.size:checkis ok.pnpm --filter @cloudhal/studio buildpassed within the bundle budget (initial load 393.8 kB gzip).pnpm design:shots: run once on its own, at 1440 and 390 px, against this branch's Studio. That was this worktree's CLI on a fresh--init-if-emptyblog project, with a local test owner account./sites,/agents,/agents/skills,/team, and the site's pages, articles, media, redirects, snapshots, activity, collections, taxonomy, translations and comments.Closes #228
🤖 Generated with Claude Code